<template>
  <el-table
    ref="table"
    :data="data"
    tooltip-effect="dark"
    style="width: 100%"
    type="selection"
    :stripe="stripe"
    :border="border"
    :height="height"
    :row-key="rowKey"
    :checkedByRowClick="checkedByRowClick"
    @select="handleSelect"
    @select-all="handleSelectAll"
  >
    <template slot-scope="{ row, column }">
      <el-table-column
        type="selection"
        width="60"
        align="center"
        :selectable="selectableCallBack"
      ></el-table-column>
      <slot :row="row" :column="column"></slot>
    </template>
  </el-table>
</template>
<script>
export default {
  props: {
    // 表格数据
    data: {
      type: Array,
      default: () => [],
    },
    // 选中项，双向绑定，传入参数添加.sync
    selectionList: {
      type: Array,
      default: () => [],
    },
    // 每行唯一标识字段
    rowKey: {
      type: String,
      default: "id",
    },
    // 不可选回调，返回true或false，传参为每行对象
    selectableCallBack: {
      type: Function,
    },
    // 表格高度
    height: {
      type: [String, Number],
      default: "325px",
    },
    stripe: {
      type: Boolean,
      default: true,
    },
    border: {
      type: Boolean,
      default: true,
    },
    // 是否行点击
    checkedByRowClick: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  computed: {
    selectionRow: {
      set(val) {
        this.$emit("update:selectionList", val);
      },
      get() {
        return this.selectionList;
      },
    },
  },
  methods: {
    handleSelect(selection, row) {
      const rowKey = this.rowKey;
      const isSelected =
        selection.findIndex((ele) => ele[rowKey] === row[rowKey]) !== -1;
      if (isSelected) {
        const isExist =
          this.selectionRow.findIndex((ele) => ele[rowKey] === row[rowKey]) !==
          -1;
        if (!isExist) {
          this.selectionRow.push({ ...row });
        }
      } else {
        this.selectionRow = this.selectionRow.filter(
          (ele) => ele[rowKey] !== row[rowKey]
        );
      }
    },
    handleSelectAll(selection) {
      const rowKey = this.rowKey;
      let selectionRow = [...this.selectionRow];
      this.data.forEach((row) => {
        const isSelected =
          selection.findIndex((ele) => ele[rowKey] === row[rowKey]) !== -1;
        if (isSelected) {
          const isExist =
            selectionRow.findIndex((ele) => ele[rowKey] === row[rowKey]) !== -1;
          if (!isExist) {
            selectionRow.push({ ...row });
          }
        } else {
          selectionRow = selectionRow.filter(
            (ele) => ele[rowKey] !== row[rowKey]
          );
        }
      });
      this.selectionRow = selectionRow;
    },
    handleDelSelection(item) {
      if (!item) {
        return;
      }
      const rowKey = this.rowKey;
      this.selectionRow = this.selectionRow.filter(
        (ele) => ele[rowKey] !== item[rowKey]
      );
      if (this.$refs.table) {
        const rowitem = this.data.find((ele) => ele[rowKey] === item[rowKey]);
        this.$refs.table.toggleRowSelection(rowitem, false);
      }
    },
    clearSelection() {
      if (this.$refs.table) {
        this.selectionRow = [];
        this.$refs.table.clearSelection();
      }
    }
  },
  watch: {
    data: {
      handler(newVal) {
        if (!newVal?.length) {
          return;
        }
        // 已选项，初始化勾选上
        if (this.selectionRow?.length && newVal?.length && this.$refs.table) {
          const rowKey = this.rowKey;
          this.$nextTick(() => {
            this.selectionRow.forEach((ele) => {
              const rowitem = newVal.find((row) => row[rowKey] === ele[rowKey]);
              if (rowitem) {
                this.$refs.table.toggleRowSelection(rowitem);
                ele = Object.assign(ele, rowitem);
              }
            });
          });
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.selected-content {
  width: 100%;
  height: 88px;
  padding: 10px;
  border: 1px solid #dfe6ec;
  margin-bottom: 20px;
  overflow-y: auto;
  .item {
    height: 28px;
    line-height: 28px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 0 10px;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
    background: rgb(234, 248, 254);
    color: #409eff;
    .del-item-btn {
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
::v-deep {
  .el-dialog .el-dialog__body {
    padding-top: 10px;
  }
  .el-form-item {
    margin-bottom: 15px;
  }
}
</style>
